﻿<template>
  <el-menu class = "sidebar-el-menu" :default-active = "onRoutes" :collapse = 'isCollapse'
  unique-opened @select = "handleSelect">
    <template v-for = "item in items">
      <!-- 有二级菜单时 -->
      <template v-if = "item.children.length">
        <el-submenu :index = "item.function_no" :key = "item.function_no"
        popper-class = 'collapse_pop'>
          <template slot = "title">
            <i class = "icon_before" :class = "item.icon ? item.icon : 'iconfont icon-shezhi'"></i>
            <span slot = "title" class = 'slider_titleContent'>{{ item.function_name }}</span>
            <i class = "iconfont icon-arrowrightb icon_After"></i>
          </template>
          <template v-for = "(subItem, i) in item.children">
            <!-- 还会有下级菜单时 -->
            <template v-if = 'subItem.children.length'>
              <The-Silde-Menu-Item :menuArray = 'subItem' :key = 'i'></The-Silde-Menu-Item>
            </template>
            <template v-else>
              <!-- 站内链接时 -->
              <el-menu-item :key = "i" :index = "subItem.function_url" v-if = "subItem.url_type === 'Router'">
                {{ subItem.function_name }}
              </el-menu-item>
              <!-- 站外链接时 -->
              <el-menu-item :key = "i" disabled :index = "subItem.function_url" class = 'silder_linkContent' v-if = "subItem.url_type === 'URI'">
                <a :href = "subItem.function_url.indexOf('?') > -1 ? subItem.function_url + '&_token='+ getQuery : subItem.function_url + '?_token='+ getQuery"
                :target = "subItem.target ? subItem.target : '_blank'" class = 'linkEl'>{{ subItem.function_name }}</a>
              </el-menu-item>
            </template>
          </template>
        </el-submenu>
      </template>
      <!-- 只有一级菜单 -->
      <template v-else>
        <!-- 站内路由时 -->
        <el-menu-item :index = "item.function_url" :key = "item.function_no" v-if = "item.url_type === 'Router'">
          <i class = "icon_before" :class="item.icon ? item.icon : 'iconfont icon-shezhi'"></i>
          <span slot = "title" class = 'slider_titleContent'>{{ item.function_name }}</span>
        </el-menu-item>
        <!-- 站外链接时 -->
        <el-menu-item :index = "item.function_url" disabled :key = "item.function_no" v-if = "item.url_type === 'URI'"
        class = 'silder_linkContent'>
          <a :href = "item.function_url.indexOf('?') > -1 ? item.function_url + '&_token='+ getQuery : item.function_url + '?_token='+ getQuery"
          :target = "item.target ? item.target : '_blank'" class = 'linkEl'>
            <i class = "icon_before" :class = "item.icon ? item.icon : 'iconfont icon-shezhi'"></i>
            <span slot = "title" class = 'slider_titleContent'>{{ item.function_name }}</span>
          </a>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
import TheSildeMenuItem from './TheSideMenu_item.vue'
export default {
  components: {
    TheSildeMenuItem
  },
  data () {
    return {
      items: []
    }
  },
  computed: {
    onRoutes () {
      return this.$store.state.currentRoute
    },
    getQuery () {
      return sessionStorage.getItem('token')
    },
    isCollapse: function () {
      return this.$store.state.isCollapse
    }
  },
  created () {
    this.getMenu()
  },
  methods: {
    getMenu () {
      this.$get('/menu').then(data => {
        if (data.status === 200) {
          this.items = this.$toTree(data.data.result, false)
          let routerNavList = []
          if (data.data.result.length) {
            data.data.result.forEach(item => {
              if (item.function_url && item.url_type === 'Router') {
                routerNavList.push(item)
              }
            })
          }
          sessionStorage.setItem('routerNavList', (routerNavList && routerNavList.length) ? JSON.stringify(routerNavList) : '')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 菜单激活时
    handleSelect (key, keyPath) {
      this.$router.push(key)
    },
    // 设置左边菜单栏的高度(最小高度为浏览器的窗口的可视高度)
    getWindowHeight () {
      if (this.$refs.silderBarHeight) {
        this.$refs.silderBarHeight.style.minHeight = window.innerHeight + 'px'
      }
    }
  },
  mounted () {
    this.getWindowHeight()
    window.onresize = () => {
      this.getWindowHeight()
    }
  }
}
</script>
